<template>
  <div class="lotto-dialog-content">
    
    <div class="nianhua">
      <img src="./../assets/imgs/yanhua-wave.gif" alt="" class="yanhua">
      <img src="./../assets/imgs/cloud-left.png" class="left-cloud">
      <img src="./../assets/imgs/cloud-right.png" class="right-cloud">
       <div class="head">
        <h4>恭喜你！获得了抽奖机会</h4>
      </div>
      <div class="texts">
        <p>恭喜你获得一次抽奖机会</p>
        <p>翻开纸牌，开启2018年好运</p>
      </div>

      <div class="cards">
        <span v-for="(item,i) in textArr"
          :key="i" 
          :class="['card','animated',index==i?'flip':'']"
          @click="kaijiang(i)">{{item}}</span>
      </div>
    </div>
    <div class="close">
      <img src="./../assets/imgs/close-btn.png" @click="close">
    </div>
  </div>
</template>
<script>
// import { Indicator } from 'mint-ui';

export default {
  name: "lotto",
  data () {
    return {
      text:'杭州银行',
      index:-1,
      ableOpen:true
    };
  },
  computed:{
    textArr(){
      return this.text.split('')
    },
    
  },
  mounted(){
  },
  methods:{
    close(){
      this.$emit('close')
      this.$router.push({path:'/'})
    },
    kaijiang(i){
      if(!this.ableOpen){
        return
      }
      this.ableOpen = false
      console.log(i)
      this.index = i

      setTimeout(() => {
        this.index = -1
     
        this.$store.dispatch('openAward').then((data)=>{
        //      Indicator.open({
        //   text: '正在开奖...',
        //   spinnerType: 'fading-circle'
        // })
          //Indicator.close()
          if( data.count>2 ){
            //今日已抽完
            this.$emit('openOther','EndAward')
          }else{
            //去开奖
            this.$emit('openOther','GetAward')
          }       
        }).catch(()=>{
          console.log(2)
          //Indicator.close()
          //显示未中奖
          this.$emit('openOther','NoAward')
          //this.index = -1
        })  
      }, 800);
    },
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common.scss';
.lotto-dialog-content{
  padding-top: px2rem(122);
  text-align: center;
  position: relative;
  
  .nianhua{
    background-image: url('./../assets/imgs/ninahua_small.png');
    height: px2rem(624);
    width: 90%;
    margin: 0 auto;
    @include bg-img();
    position: relative;
    .yanhua{
      position: absolute;
      right:2%;
      transform: scale(.6);
      top:px2rem(130);
    }
    .right-cloud{
      bottom:px2rem(50);
    }
    .head{
      padding-top: px2rem(100);
      h4{
        // @include font-dpr(34px);
        // letter-spacing: 1px;
        // margin: 0 auto;
        // display: inline-block;
        // @include bg-img();
        // padding: 0 px2rem(50);
        // line-height: px2rem(40);
        // height: px2rem(60);
        @extend .dialog-title;
        background-image: url('./../assets/imgs/nianhua-head.png');
      }
    }
    .texts{
      // @include font-dpr(20px);
      font-size: px2rem(22);
      p{
        margin:0;
        padding: 0;
        padding-bottom: px2rem(10);
        //line-height: px2rem(34);
      }
    }
    .cards{
      width:80%;
      //background: green;
      margin: 0 auto;
      //background-color: green;
      position: relative;
      //left:px2rem(10);
      .card{
        
        color: $color-1;
        font-weight: bold;
        font-size: px2rem(60);
        //@include font-dpr(60px);
        @include bg-img();
        background-image: url('./../assets/imgs/lotto/img_01.png');
        display: inline-block;
        height: px2rem(136);
        line-height: px2rem(126);
        text-align: center;
        width: 46%;
        &:nth-of-type(2n){
          margin-left: 1%;
        }
      }
    }
  }
  .close{
    margin-top: px2rem(32);
    img{
      height: px2rem(80);
    }
  }
}

</style>